<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <scroll-view scroll-y>
      <view class="content">
        <!-- 签约地点 -->
        <view class="address"
          ><text @tap="openPicker" style="margin-left: 10rpx"
            >选择区域:{{ userform.address == '' ? '选择区域' : userform.address }}</text
          >
          <cc-selectDity
            :province="addressForm.province"
            :city="addressForm.city"
            :area="addressForm.area"
            :show="show"
            @changeClick="changeClick"
            @sureSelectArea="onsetCity"
            @hideShow="onhideShow"
          ></cc-selectDity>
        </view>
        <!-- 用户信息表单 -->
        <uni-forms :rules="rules" ref="formRef" :model="userform">
          <view class="patientinfo">
            <!-- 证件号   -->
            <uni-forms-item name="idNumber"
              ><view class="lisence">
                <text style="line-height: 30rpx">证件号：</text>
                <input
                  type="idcard"
                  v-model="userform.idNumber"
                  class="li-input"
                  :maxlength="18"
                /> </view
            ></uni-forms-item>
            <!-- 姓名： -->
            <uni-forms-item name="name">
              <view class="name">
                <text style="line-height: 30rpx">姓名：</text>
                <input v-model="userform.name" class="li-input" :maxlength="18" />
              </view>
            </uni-forms-item>
            <view class="sex">
              <text style="line-height: 30rpx">性别：</text>
              <radio-group @change="ongenderChange">
                <label class="radio">
                  <radio value="男" color="#27ba9b" :checked="userform.sex === '男'" />
                  男
                </label>
                <label class="radio">
                  <radio value="女" color="#27ba9b" :checked="userform.sex === '女'" />
                  女
                </label>
              </radio-group>
            </view>
            <uni-forms-item name="age">
              <view class="age">
                <text style="line-height: 30rpx">年龄：</text>
                <input v-model="userform.age" class="li-input" :maxlength="4" />
              </view>
            </uni-forms-item>
            <uni-forms-item name="phoneNumber">
              <view class="phone">
                <text style="line-height: 30rpx">电话：</text>
                <input type="tel" v-model="userform.phoneNumber" class="li-input" :maxlength="11" />
              </view>
            </uni-forms-item>
            <uni-forms-item name="detailaddress"
              ><view class="detailaddress">
                <text style="line-height: 30rpx">具体地址：</text>
                <input
                  v-if="arr.length > 1"
                  v-model="detailaddress"
                  class="li-input"
                  :maxlength="50"
                />
                <input v-else v-model="detailaddress" class="li-input" :maxlength="50" />
              </view>
            </uni-forms-item>
          </view>
          <!-- 疾病分类 -->
          <view class="disease">
            <view class="T">人群分类</view>
            <view class="disease_content">
              <view
                @tap="disease(item)"
                v-for="item in diseaseform"
                :key="item.id"
                :class="item.select ? 'active' : ''"
                class="disease_item"
                >{{ item.crowdName }}</view
              >
            </view>
            <view class="disease_ps">
              <view style="width: 50rpx">备注：</view>
              <input v-model="tips" style="width: 100%" />
            </view>
            <view class="button">
              <view @tap="save" class="save_btn">确认修改</view>
            </view>
          </view>
        </uni-forms>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback2.vue'
import { modifyFile } from '@/services/sign'
import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
import { getAllCrowd } from '@/services/sign'
const addressForm = ref({
  province: '北京市',
  city: '北京市',
  area: '东城区',
})
const query = defineProps<{ params: any }>()
const diseaseform = ref()
const detail = ref()
detail.value = JSON.parse(query.params)
var arr = detail.value.address.split(' ')
console.log(arr)

const userform = ref({
  id: detail.value.id,
  name: detail.value.name,
  sex: detail.value.sex,
  age: detail.value.age,
  address: arr[0],
  idNumber: detail.value.idNumber,
  phoneNumber: detail.value.phoneNumber,
  homeId: null,
  disease: '',
})

//及备注
const tips = ref('')
const detailaddress = ref('')
detailaddress.value = arr[1]
const show = ref(false)
//打开选择器
const openPicker = () => {
  show.value = true
}
//改变地点
const changeClick = (value: string, value2: string, value3: string) => {
  addressForm.value.province = value
  addressForm.value.city = value2
  addressForm.value.area = value3
}
//点击确定
const onsetCity = (e: any) => {
  let data = e.detail.target.dataset
  let address = data.province + data.city + data.area
  userform.value!.address = address
  show.value = false
}
//点击取消
const onhideShow = () => {
  show.value = false
}
//修改性别
const ongenderChange = (ev: any) => {
  userform.value!.sex = ev.detail.value
}

//点击保存
//校验规则
const formRef = ref<UniHelper.UniFormsInstance>()
const rules: UniHelper.UniFormsRules = {
  name: {
    rules: [{ required: true, errorMessage: '请输入姓名' }],
  },
  idNumber: {
    rules: [{ required: true, errorMessage: '请输入身份证' }],
  },
  age: {
    rules: [{ required: true, errorMessage: '请输入年龄' }],
  },
  phoneNumber: {
    rules: [{ required: true, errorMessage: '请输入电话' }],
  },
}
// 子给父传需要defineEmits 派发
const emit = defineEmits(['on-click'])

//点击存档
const save = async () => {
  try {
    await formRef.value?.validate?.()

    userform.value.address = userform.value.address + detailaddress.value
    detailaddress.value = ''
    userform.value.disease = ''
    let arr = []

    diseaseform.value.forEach((item: any) => {
      if (item.select) {
        arr.push(item.crowdName)
      }
    })
    if (tips.value != '') arr.push(tips.value)
    userform.value.disease = arr.toString()
    if (userform.value.disease == '') {
      uni.showToast({ icon: 'none', title: '请输入分类' })
      return
    }
    console.log(userform.value)

    const res = await modifyFile(userform.value)
    if (res.code == 200) {
      uni.showToast({ icon: 'none', title: '修改成功' })
      uni.navigateTo({ url: '/pages/index/index' })
    }
  } catch (error) {}
}

//点击某个疾病
const disease = (item: any) => {
  item.select = !item.select
}
//获取疾病类型
const getdisease = async () => {
  const res = await getAllCrowd()
  diseaseform.value = res.data
  diseaseform.value.forEach((item: any) => {
    item.push({ select: false })
  })
}
onLoad(() => {
  getdisease()
})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 20rpx 40rpx;
  width: 100%;
  .address {
    width: 100%;
    height: 40rpx;
    font-size: 16rpx;
    // border: 1rpx solid #ccc;
    // box-shadow: 1rpx 1rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 40rpx;
    color: #1ab1ff;
    font-weight: bold;
    .show {
      height: 250rpx;
    }
  }
  .patientinfo {
    font-size: 14rpx;
    color: #1ab1ff;
    margin: 10rpx 0;
    width: 100%;
    padding: 10rpx;
    // border: 1rpx solid #ccc;
    // box-shadow: 1rpx 1rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;

    .lisence {
      height: 30rpx;
      display: flex;
      width: 300rpx;
      font-size: 16rpx;
      .li-input {
        padding-left: 5rpx;
        width: 200rpx;
        height: 100%;
        border: 1rpx solid #c1bfbf;
        border-radius: 5rpx;
        color: #1ab1ff;
      }
    }
    .name {
      height: 30rpx;
      display: flex;
      width: 250rpx;
      font-size: 16rpx;
      .li-input {
        width: 100rpx;
        padding-left: 5rpx;
        height: 100%;
        border: 1rpx solid #c1bfbf;
        border-radius: 5rpx;
        color: #1ab1ff;
      }
    }
    .sex {
      height: 30rpx;
      display: flex;
      width: 150rpx;
      // margin-top: 10rpx;
      display: flex;
      align-items: center;
      font-size: 16rpx;
    }
    .age {
      height: 30rpx;
      display: flex;
      width: 150rpx;
      font-size: 16rpx;
      // margin-top: 10rpx;
      .li-input {
        padding-left: 5rpx;
        width: 50rpx;
        height: 100%;
        border: 1rpx solid #c1bfbf;
        border-radius: 5rpx;
        color: #1ab1ff;
      }
    }
    .phone {
      height: 30rpx;
      display: flex;
      width: 250rpx;
      font-size: 16rpx;
      // margin-top: 10rpx;
      .li-input {
        padding-left: 5rpx;
        width: 150rpx;
        height: 100%;
        border: 1rpx solid #c1bfbf;
        border-radius: 5rpx;
        color: #1ab1ff;
      }
    }
    .detailaddress {
      height: 30rpx;
      display: flex;
      width: 450rpx;
      font-size: 16rpx;
      // margin-top: 10rpx;
      .li-input {
        padding-left: 5rpx;
        width: 350rpx;
        height: 100%;
        border: 1rpx solid #c1bfbf;
        border-radius: 5rpx;
        color: #1ab1ff;
      }
    }
  }
  .disease {
    font-size: 14rpx;
    color: #5e5f5f;
    margin: 10rpx 0;
    width: 100%;
    padding: 10rpx;
    // border: 1rpx solid #ccc;
    // box-shadow: 1rpx 1rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;

    .button {
      height: 50rpx;
      width: 100%;
      // background-color: #1ab1ff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // margin-top: 10rpx;
      .save_btn,
      .next {
        height: 40rpx;
        width: 100rpx;
        background-color: #1ab1ff;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
        font-weight: bold;
        border-radius: 10rpx;
      }
    }
    .T {
      width: 100%;
      font-size: 18rpx;
      color: #878484;
    }
    .disease_ps {
      // height: 50rpx;
      width: 300rpx;
      padding: 5rpx 10rpx;
      font-size: 14rpx;
      color: #8d8b8b;
      font-weight: bold;
      border: 1rpx solid #ccc;
      display: flex;
      border-radius: 3rpx;
      margin-right: 10rpx;
      margin-top: 10rpx;
    }
    .disease_content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10rpx;
      .disease_item {
        padding: 5rpx 10rpx;
        font-size: 14rpx;
        color: #8d8b8b;
        font-weight: bold;
        border: 1rpx solid #ccc;
        border-radius: 3rpx;
        margin-right: 10rpx;
        margin-top: 10rpx;
      }

      .active {
        background-color: #1ab1ff;
        color: #fff;
      }
    }
  }
}
</style>